<template>
  <a-modal v-model:visible="visible" width="45vw" title="选择车辆" unmount-on-close>
    <div class="license-content">
      <p class="warn-text">修改车牌对于订单信息、数据统计、财务统计、库存及OTA反占、车辆里程预警等有影响，请谨慎操作!</p>
      <p>请选择修改的车辆：</p>
      <a-radio-group v-model="form.oldOrderCarId" :options="orderCarInfoList" direction="vertical" />
    </div>
    <template #footer>
      <a-space>
        <a-button @click="onCancel">关闭</a-button>
        <a-button type="primary" @click="onConfirm" :loading="okLoading">确认</a-button>
      </a-space>
    </template>
  </a-modal>
</template>

<script setup>
  import { Message } from '@arco-design/web-vue'
  import { ref } from 'vue'

  const props = defineProps({
    orderCarInfoList: {
      type: Array,
      default: () => [],
    },
  })
  const visible = ref(false)
  const form = ref({})
  const emit = defineEmits(['ok'])
  const open = (record) => {
    visible.value = true
    form.value = record
    form.value.oldOrderCarId = ''
  }
  const okLoading = ref(false)
  const onCancel = () => {
    okLoading.value = false
    visible.value = false
  }
  const onConfirm = () => {
    if (form.value.oldOrderCarId) {
      emit('ok', form.value)
      visible.value = false
    } else {
      Message.error('请选择修改的车辆')
    }
  }
  defineExpose({
    open,
  })
</script>

<style lang="less" scoped>
  .license-content {
    padding-bottom: 18px;
    .warn-text {
      color: #f53f3f;
      margin-bottom: 20px;
    }
  }
</style>
